<template>

    <div class="container" style="background:white">
        <div class="row">
            <div class="col-md-12">
                <header>
                    <h1>{{ userName }}的微博</h1>
                </header>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <!--导航-->
                <nav class="navbar navbar-default">
                    <div class="container-fluid">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                            <a class="navbar-brand" href="#" onclick="location.href='List'">首页</a>
                        </div>

                        <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav">
                                <li ><a href="#" onclick="location.href='Attention'">关注的人</a></li>
                                <li><a href="#" onclick="location.href='AddWeibo'">写微博</a></li>

                            </ul>

                            <ul class="nav navbar-nav navbar-right">

                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                        aria-haspopup="true" aria-expanded="false">我的空间<span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">我写的微博</a></li>
                                        <li><a href="#">我的评论</a></li>
                                    </ul>
                                </li>
                                <li><button type="button" class="btn btn-default navbar-btn">登陆</button></li>
                            </ul>
                        </div><!-- /.navbar-collapse -->
                    </div><!-- /.container-fluid -->
                </nav>
                <!--END导航-->
            </div>
        </div>
        <div class="row">
            <div class="col-md-9 col-sm-12">
                <!--微博-->
                <div class="row">
                    <div class="col-sm-6 col-md-4" v-for="(obj, index) in articles" :key="index">
                        <div class="thumbnail">
                            <img :src="'src/imgs/' + obj.img" alt="...">
                            <div class="caption">
                                <h3>{{ obj.title }}</h3>
                                <p>{{ obj.content }}..</p>
                                <p><a href="#" class="btn btn-primary" role="button" @click="navigateToDetail(obj.weiboId, obj.userName)">详情</a> </p>
                            </div>
                        </div>
                    </div>

                    <!-- <div class="col-sm-6 col-md-4">
			<div class="thumbnail">
			   <img src="../views/imgs/yutian2.jpg"  alt="...">
			  <div class="caption">
				<h3>萌娃爆笑一刻</h3>
				<p>萌娃和公鸡一起玩,出乎意料的被公鸡追..</p>
				<p><a href="#" class="btn btn-primary" role="button">详情</a> <a href="#" class="btn btn-default" role="button">看作者</a></p>
			  </div>
			</div>
		  </div> -->
                    <!-- <div class="col-sm-6 col-md-4">
			<div class="thumbnail">
			   <img src="../views/imgs/yutian3.jpg"  alt="...">
			  <div class="caption">
				<h3>心态的修养</h3>
				<p>不要把问题当任务,当成一件事,你就能保持..</p>
				<p><a href="#" class="btn btn-primary" role="button">详情</a> <a href="#" class="btn btn-default" role="button">看作者</a></p>
			  </div>
			</div>
		  </div> -->
                </div>
                <!--END表单-->

                <!--分页-->
                <el-pagination background layout="prev, pager, next, total" :total="total" :page-size="pagesize"
                    style="margin-top: 20px" @current-change="currentChange">
                </el-pagination>
                <!--END分页-->
            </div>
            <div class="col-md-3 col-sm-12">
                <!--排行榜-->

                <!--END 排行榜-->
                <!--排行榜-->

                <!--END 排行榜-->
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <!--面板-->

                <!--END 面板-->
            </div>
        </div>




    </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import { setSessionStorage, getSessionStorage } from "../common.js";
import axios from "axios";
import { onMounted } from 'vue';
//axios.defaults.baseURL = "http://localhost:81";//更改

export default {
    setup() {
        const router = useRouter();
        const state = reactive({
            total: 0,
            pagesize: 10,
            imgcode: "",
            isLogin: false,
            isLoginError: false,
            loginErrorMsg: "",
            loginname: "",
            loginpwd: "",
            articles: [],
            userName: getSessionStorage("userName"),
            name: "Login",
            list: {
                pageNum: 1,
                pageSize: 10,
                loginName: getSessionStorage("userName"),
                state: 1
            },
        });

        onMounted(() => {
        })

        getuserNameList(1);

        function getuserNameList(page) {
            axios.get("http://localhost:81/xw01/xw-weibo/api/weibo/getWeiboListByLoginName", {
                params: {
                    pageNum: page,
                    pageSize: state.list.pageSize,
                    loginName: state.list.loginName,
                    state: state.list.state
                }
            })
                .then(function (response) {
                    console.log(response.data);
                    state.articles = response.data.data.records;
                    state.total = response.data.data.total;

                });

        }
        function currentChange(pageNum) {
            getuserNameList(pageNum);
        }


        function navigateToDetail(weiboId, userName) {
        console.log(weiboId);
        console.log(userName);
            router.push({ 
                path: '/detail2', 
                query: { weiboId: weiboId, userName: userName } 
            });
        }


        return {
            ...toRefs(state),
            getuserNameList,
            currentChange,
            navigateToDetail
        }

    }
}

</script>